<template>
  <div id="login">
    <div class="login-main">
      <el-input placeholder="请输入账号" v-model="username" clearable>
      </el-input>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
      <div class="login-btn">
        <el-button type="primary" @click="doLogin" plain>登录</el-button>
        <el-button type="danger" @click="doReset" plain>清空</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      password: "",
      username: "",
    };
  },
  methods: {
    doReset() {
      (this.username = ""), (this.password = "");
    },
    doLogin() {
      var params = {
        username: this.username.trim(),
        password: this.password.trim(),
      };
      if (params.username == "" || params.password == "") {
        this.$message.error("请重试");
        return;
      }
      var data = qs.stringify(params);
      this.$store.commit("isLogin", "退出");
      this.$axios
        .post("http://127.0.0.1:8080/CollegeOrder/login", data)
        .then(
          function(res) {
            this.$store.commit("setUser", res.data);
            this.$message({
              message: "登陆成功",
              type: "success",
            });
            this.$router.push("/list");
          }.bind(this)
        )
        .catch((err) => {
          console.log(err);
          this.$message.error("请重试");
        });
    },
  },
  beforeCreate() {
    // 没有退出登录不能跳转到登录页
    if (this.$store.state.user != "") {
      this.$router.push("/list");
    }
  },
};
</script>

<style></style>
